<template>
  <!-- 搜索建议 -->
  <div class="search-suggest">
    <meta name="referrer" content="never" />

    <ul v-if="suggest" class="sug">
      <li v-for="(s, index) in suggest" :key="index" @click.stop="change">
        <van-icon name="search" color="#ccc" size="18px" />
        <p v-html="$options.filters.highList(s, keyword)"></p>
      </li>
    </ul>
  </div>
</template>

<script>
import { getSearchSugData } from '../api/search';

export default {
  props: ['keyword'],

  data() {
    return {
      suggest: [],
    };
  },
  created() {
    this.getSuggest();
    // console.log(this.keyword);
  },
  methods: {
    getSuggest() {
      // console.log(this.keyword,'====>key');
      getSearchSugData(this.keyword).then(re => {
        // console.log('rereeee', re);
        this.suggest = re.data;
        // console.log(this.suggest);
      })
    },
    change(event) {
      console.dir(event)
      this.$emit("search", event.target.innerText);
    },
  },
  watch: {
    keyword() {
      this.getSuggest();
    },
  },
  filters: {
    highList: function (value, keyword) {
      // console.log('val==>', value, 'key==>', keyword);
      return value.replace(keyword, '<i class="keyword">我</i>');
    },
  },
};
</script>

<style lang="scss" scoped>
.search-suggest {
  .sug {
    li {
      height: 50px;
      margin: 0 10px;
      display: flex;
      align-items: center;

      p {
        font-size: 14px;
        margin: 0 10px;
      }
    }
  }
}

em.keyword {
  color: skyblue;
}
</style>